<template>
  <div class="titleContent" :class="isBack ? 'active' : ''">

    <div class="titleContent_left">
      <div class="titleContent_left_line"></div>
      <div class="titleContent_left_title">
        {{ title }}
      </div>
      <div class="titleContent_left_dec" v-if="dec">
        {{ dec }}
      </div>
      <div class="titleContent_left_seconTitleIcon" v-if="seconTitle">
        <i class="el-icon-d-arrow-right"></i>
      </div>
      <div class="titleContent_left_seconTitle" v-if="seconTitle">
       {{ seconTitle }}
      </div>
    </div>

    <div class="titleContent_right" v-if="!isBack">
      <slot name="titleContentRight">
      </slot>
    </div>
    <div class="titleContentRight_back" v-if="isBack" @click="goBack">
      <i class="el-icon-s-home"></i> 返回
    </div>

  </div>
</template>
  
<script>

export default {
  props: {
    title: {
      type: String,
      default: ""
    },
    dec: {
      type: String,
      default: ""
    },
    seconTitle: {
      type: String,
      default: ""
    },
    isBack: {
      type: Boolean,
      default: true
    },
    isTop: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {

    }
  },
  computed: {

  },
  mounted() {

  },
  methods: {
    goBack() {
      history.back(-1)
    }


  }
}
</script>
  
<style lang="scss" scoped>
.titleContentRight_back {
  cursor: pointer;
  color: #3a62d7;
}
</style>

  